//表单块容器
<template>

<div class="form-block-contianer">

    <div class="form-block-header"  v-if='title'>

        <h1 class="title">
            {{title}}
        </h1>
        
        <slot name='header'></slot>
    </div>
    
    <div class="form-block-content">
        <slot>

        </slot>
    </div>
    
</div>

</template>

<script lang='ts'>
import {Component,Prop, Vue} from 'vue-property-decorator' 

@Component({})
export default class formBlockContainer extends Vue {
    name:string = 'formBlockContainer'

    @Prop()
    title:string

}


</script>

<style scoped lang='scss'>
.form-block-contianer{
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap:  wrap;
    
    .form-block-header{
        $size: _rem(20px);
        flex: 0 $size;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        margin-bottom: _rem(10px);
        height: $size;
        
        text-align: left;
        line-height: $size;
        
        .title{
            flex: 1 1;
            font-size: _rem(12px);
            font-weight: 400;
            color: $font_secondary;
        }
        
    }
    
    .form-block-content{
        flex: 1 1;
        box-sizing: border-box;
        padding: _rem(10px);
        border-radius: $border_radius;
        background: $block_bg_color;
        box-shadow: $default_shadow;
    }
}

</style>